<!DOCTYPE html>
<html>
<head>
<base href="#(basePath)">
<meta charset="UTF-8">
<title>计时页面</title>
<link rel="stylesheet" href="plug/flipclock/flipclock.css">
<link rel="stylesheet" href="plug/layui/css/layui.css">
<script src="plug/jquery/jquery-1.9.0.min.js"></script>
<script src="plug/layui/lay/dest/layui.all.js"></script>

<style type="text/css">
	.layui-main {
		width:53%;
		margin-top: 10em;
	}
	h1 {font-size: 50px;}
	/*(外层修改宽度，高度，字体大小，背景颜色，行高) */
	.flip-clock-wrapper ul {height: 300px;width:150px; }
	/* 外层阴影 */
	.flip-clock-wrapper .flip{}
	/* (行高) */
	.flip-clock-wrapper ul li{line-height: 300px;}
	/* (字体大小) */
	.flip-clock-wrapper ul li a div {}
	/* (颜色,文字字体大小,圆角,文字阴影) */
	.flip-clock-wrapper ul li a div div.inn {font-size: 260px;}
	/* *如果是时钟(有两个小圆点) */
	/* 上圆点:修改宽度，高度，背景颜色，阴影 */
	.flip-clock-dot.top {top: 135px;}
	/* 下圆点:修改宽度，高度，背景颜色，阴影 */
	.flip-clock-dot.bottom{top: 165px;}
	/* *顶上文字 */
	.flip-clock-divider .flip-clock-label{font-size: 30px; right: -175px !important; display: none;}
	.flip-clock-divider.minutes .flip-clock-label{right: -175px;}
	.flip-clock-divider.seconds .flip-clock-labell{right: -175px;}
	.flip-clock-wrapper ul li a div.up:after{top:147px;}
</style>
</head>
<body class="layui-bg-gray">

<!-- hidden s-->
<input type="hidden" id="questionid" value="#(questionid)">
<input type="hidden" id="timeid" >
<!-- hidden e-->
   <div class="layui-main">
   <h1 align="center">我是标题</h1>
	<div class="your-clock" style="margin-top: 50px;"></div>
	<div style="width: 40%; margin: 50px auto;">
	<div class="layui-btn-group">
	<button class="start layui-btn layui-btn-big layui-btn-normal">开始</button>
	<button class="reset layui-btn layui-btn-big layui-btn-normal">复位</button>
	<button class="stop layui-btn layui-btn-big layui-btn-normal">停止</button>
<!-- 	<button class="unCountdown layui-btn layui-btn-big layui-btn-normal">计时</button>
	<button class="Countdown layui-btn layui-btn-big layui-btn-normal">倒计时</button> -->
<!-- 	<button class="voice layui-btn layui-btn-big layui-btn-normal">声音提示</button>
	<button class="voice-10 layui-btn layui-btn-big layui-btn-normal">声音提示</button> -->
	<button class="select layui-btn layui-btn-big layui-btn-normal">选题</button>
	<button class="godown layui-btn  layui-btn-big layui-btn-normal" title="试题维护" >
				<i class="layui-icon">&#xe602;</i>
	</button>
	</div>
	</div>
	</div>
	
	<script src="plug/flipclock/flipclock.js"></script>
	<script type="text/javascript">

	 $(function(){
			var requestAjax = function(url, data){
				return $.ajax({type : "POST",dataType: 'json',async:false,url : url,data : data});
			}
			/*
				配置参数
				autoStart：类型：boolean。如果设置为false，时钟不会自动开始运行。默认值为true。
				countdown：类型：boolean。如果设置为true，时钟会以向上翻页的形式执行计时动画。默认值为false。
				callbacks：类型：object。在各种时间事件被触发后返回的一个对象回调函数。
				classes：类型：object。用于添加到DOM元素上的CSS类的对象。
				clockFace：类型：string。用于创建所显示时钟的名称。默认值为HourlyCounter。
				defaultClockFace：类型：string。如果 clock face 没哟丠定义，使用该参数来作为默认的 clock face 。默认值为HourlyCounter。
				defaultLanguage：类型：string。默认使用的语言。默认值是english
				主要方法
				start()：在FlipClock对象是上调用该方法会使时钟开始动画。
				clock.start(function() {
				// this (optional) callback will fire each time the clock flips
				});
				stop()：该方法会将时钟动画停止。
				clock.stop(function() {
				// this (optional) callback will fire after the clock stops
				});
				setTime()：该方法会在初始化后设置时钟的时间。
				clock.setTime(3600);
				setCountdown()：该方法会改变计数器的计数方式，向上或向下计数。
				clock.setCountdown(true);
				getTime()：在初始化后获取时钟的时间。 var time = clock.getTime(); 
			*/
			//倒计时时长 
			var countDountTime = 30;
			//倒计时是否用尽 
			var isUseUp = false;
			var clock = $('.your-clock').FlipClock({
				autoStart: false,
				countdown: false,
				clockFace: "倒计时",
				language: "Chinese",
				callbacks: {
					interval: function() {
					   var time = clock.getTime().time;
					   //倒计时的声音 
					   if(clock.countdown){
					       if(time == 10){
					    	    removePlaySound();
								var src='voice/countdown10sec.wav';
								playSound(src);
						   }
						   if(time == 0){
							   removePlaySound();
							   var src='voice/timesover.wav';
							   playSound(src);
							   clock.stop();
							   clock.setCountdown(false);
							   clock.start();
							   isUseUp = true;
						   }
					   }else{
						   if(time == 150){
							   removePlaySound();
								var src='voice/30sec.mp3';
								playSound(src);
							}
							if(time == 180){
								removePlaySound();
								var src='voice/qjcj.mp3';
								playSound(src);
							}
					   }
		        		console.log(clock.getTime().time);
		        	}
				}
			});

			//播放声音
			//src='http://www.gongqinglin.com/accessory/ding.wav'
			var playSound = function playSound(src){
		      var borswer = window.navigator.userAgent.toLowerCase();
		      if ( borswer.indexOf( "ie" ) >= 0 ){
		        //IE内核浏览器
		        var strEmbed = '<embed id="embedPlay" src="'+src+'" autostart="true" hidden="true" loop="false"></embed>';
		        if ( $( "body" ).find( "embed" ).length <= 0 )
		          $( "body" ).append( strEmbed );
		        var embed = document.embedPlay;

		        //浏览器不支持 audion，则使用 embed 播放
		        embed.volume = 100;
		        //embed.play();这个不需要
		      } else {
		        //非IE内核浏览器
		        var strAudio = "<audio id='embedPlay' src='"+src+"' hidden='true'>";
		        if ( $( "body" ).find( "audio" ).length <= 0 )
		          $( "body" ).append( strAudio );
		        var audio = document.getElementById( "embedPlay" );
		        //浏览器支持 audion
		        audio.play();
		      }
		    }
		    var removePlaySound = function(){
					$("#embedPlay").remove();
			    }	
		    
			$(".start").click(function(){
				clock.start(function() {
				// this (optional) callback will fire each time the clock flips
				});
			});
			$(".reset").click(function(){
				clock.stop();
				clock.reset();
			});
			$(".stop").click(function(){
				removePlaySound();
				clock.stop(function() {
					//存储所用时长 
					/**
					*1.介绍所用时长
					*2.答题所用时长
					**/
					var time = clock.countdown ? ( isUseUp ? clock.getTime().time+countDountTime : countDountTime-clock.getTime().time):clock.getTime().time;//秒
					var qid = $("#questionid").val();
					var url={},data={};
					if(qid == 0){
						url = 'saveIntroduceTime'; 
						data.time = time;
					}else{
						url = 'question/updUseTime';
						data.time = time;
						data.id = qid;
					}
					var request = requestAjax(url,data);
					request.done(function(res, tst, jqXHR) {
						if(res.isOk){
							$('#timeid').val(res.obj.tid);
						}
					});
					
					
				});
			});
			$(".Countdown").click(function(){
				clock.setCountdown(true);
				clock.setTime(countDountTime);
				clock.start(function() {
				});
			});
			$(".unCountdown").click(function(){
				clock.setCountdown(false);
				clock.start(function() {
				});
			});
			$(".voice").click(function(){
				removePlaySound();
				var src='voice/timesover.wav';
				playSound(src);
			});
			$(".voice-10").click(function(){
				removePlaySound();
				var src='voice/countdown10sec.wav';
				playSound(src);
			});
			$(".select").click(function(){
				var tid = $('#timeid').val();
				window.location.href="select/"+tid;
			});
			$(".godown").click(function(){
				window.location.href="questions";
			});
	 });
		</script>
</body>
</body>
</html>